/*
* 资产信息、流转日志、变更记录功能页面
* */
import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import {Router, Route, Switch, withRouter} from 'react-router-dom';
import {ActivityIndicator, Tools, ActionSheet, Icon, List} from 'weaver-mobile';
import {TabPage, Form, ListViewPage, RouteLayout, MapPage} from 'weaver-mobile-page';
import { toJS } from 'mobx';
import './assetInfo.less';
const ButtonGroup = RouteLayout.ButtonGroup;
const getLabel = Tools.getLabel;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
    wrapProps = {
        onTouchStart: e => e.preventDefault(),
    };
}
@inject('assetInfoStore','mapPageChooseStore')
@withRouter
@observer
export default class AssetInfo extends Component {
    componentDidMount() {
        this.Init(this.props)
    }

    componentWillReceiveProps(nextProps, nextContext) {
        this.Init(nextProps)
    }

    Init = (props) => {      //判断路由并请求数据
        const {assetInfoStore, match} = props;
        const {path, id} = match.params;
        if (id === 'edit') {
            return
        }
        assetInfoStore.init(path, id);
    };
    showActionSheet = () => {
        const {assetInfoStore, history} = this.props;
        const {cptid, cptname, opt_edit, opt_back, opt_mend, opt_delete} = assetInfoStore;
        const {getCapitalEditForm, doCapitalDel} = assetInfoStore;
        const BUTTONS = [{
            content: getLabel(31129, "取消"), onClick: () => {
            }
        }];
        if (opt_delete) {
            BUTTONS.unshift({content: getLabel(91, "删除"), onClick: () => doCapitalDel(history, cptid),});
        }
        if (opt_mend) {
            BUTTONS.unshift({
                content: getLabel(83557, "送修"),
                onClick: () => history.push(`/operations/cptmend?cptid=${cptid}&cptname=${cptname}`)
            });
        }
        if (opt_back) {
            BUTTONS.unshift({
                content: getLabel(1384, "归还"),
                onClick: () => history.push(`/operations/cptback?cptid=${cptid}&cptname=${cptname}`)
            });
        }
        if (opt_edit) {
            BUTTONS.unshift({content: getLabel(26473, "编辑"), onClick: () => getCapitalEditForm(history, cptid)});
        }
        ActionSheet.showActionSheetWithOptions({
            options: BUTTONS,
            cancelButtonIndex: BUTTONS.length - 1,
            maskClosable: true,
            'data-seed': 'logId',
            wrapProps,
        });
    };

    render() {
        const {assetInfoStore, history} = this.props;
        const {
            isLoading0, isLoading1, isLoading2, nowTab, cptid, assetInfoForm, flowLogList, changeLogList,
            layout, assetEditForm, mapLayout, address, position
        } = assetInfoStore;
        const {saveForm, changeTab} = assetInfoStore;
        const tab = {
            tabs: [
                {title: getLabel(15806, "资产信息"), index: 0},
                {title: getLabel(34253, "流转日志"), index: 1},
                {title: getLabel(19765, "变更记录"), index: 2}
            ],
            btns: [
                <Icon type="ellipsis" onClick={this.showActionSheet.bind(this)}/>
            ]
        };
        const tabProps = {
            onChange: (tab) => {
                changeTab(tab.index);
                if (tab.index === 0) {
                    history.replace('/assetInfo/infoCard/' + cptid);
                } else if (tab.index === 1) {
                    history.replace('/assetInfo/flowLog/' + cptid);
                } else if (tab.index === 2) {
                    history.replace('/assetInfo/changeLog/' + cptid);
                }
            },
            initialPage: 0,     //初始化tab
            page: nowTab//当前tab
        };
        const buttonGroupData = [
            {
                key: 'clear',
                text: getLabel(31129, "取消"),
                onClick: () => history.go(-1),
            },
            {
                key: 'submit',
                text: getLabel(826, "确定"),
                onClick: () => saveForm(history),
                type: 'primary',
            },
        ];
        const { isInit } = assetInfoForm;
        const isInit1 = assetEditForm.isInit;
        const { mapPage } = this.props.mapPageChooseStore;
        return (
            <div>
                <TabPage
                    className='asset-info-tab'
                    tabs={tab.tabs}
                    btns={tab.btns}
                    tabProps={tabProps}
                />
                <div className="asset-info-wrapper">
                    <Router history={history}>
                        <Switch>
                            <Route name="infoCard" path="/assetInfo/infoCard"
                                   render={() =>
                                       (isLoading0 ?
                                               (<div className='loading'><ActivityIndicator animating size='large'/>
                                               </div>)
                                               :
                                               <div className="asset-info-form-wrapper">
                                                   <Form style={{ height: '100%' }} >
                                                        <List>
                                                            {isInit&&this.getFields()}
                                                        </List>
                                                    </Form>
                                               </div>
                                       )}/>
                            <Route name="flowLog" path="/assetInfo/flowLog"
                                   render={() =>
                                       (isLoading1 ?
                                               (<div className='loading'><ActivityIndicator animating size='large'/>
                                               </div>)
                                               :
                                               <ListViewPage.Normal key='id' store={flowLogList}/>
                                       )}/>
                            <Route name="changeLog" path="/assetInfo/changeLog"
                                   render={() =>
                                       (isLoading2 ?
                                               (<div className='loading'><ActivityIndicator animating size='large'/>
                                               </div>)
                                               :
                                               <ListViewPage.Normal key='id' store={changeLogList}/>
                                       )}/>
                        </Switch>
                    </Router>
                </div>

                <Route
                    key={layout.id}
                    path={layout.path}
                    getContainer={document.body}
                    render={() => (
                        <RouteLayout style={{zIndex: 999}}>
                            <div
                                key="infoCardEdit"
                                className="wm-route-layout cpt"
                                style={{position: 'fixed'}}
                            >
                                <div style={{
                                    width: '100%',
                                    height: '100%',
                                    overflow: 'scroll',
                                    WebkitOverflowScrolling: 'touch',
                                    paddingBottom: '92px',
                                    boxSizing: 'border-box'
                                }}>
                                    {isLoading0 ?
                                        (<div className='loading'><ActivityIndicator animating size='large'/></div>)
                                        :
                                        <Form style={{ height: '100%' }} >
                                            <List>
                                                {isInit1&&this.getFields1()}
                                            </List>
                                        </Form>
                                        // <Form store={assetEditForm}/>
                                    }
                                </div>
                                <ButtonGroup data={buttonGroupData}/>
                            </div>
                        </RouteLayout>
                    )}
                />
                <Route
                    key={mapLayout.id}
                    path={mapLayout.path}
                    getContainer={document.body}
                    render={() =>(
                        <RouteLayout style={{zIndex: 999}}>
                            <div
                                key="infoCardEdit"
                                className="wm-route-layout cpt"
                                style={{position: 'fixed'}}
                            >
                                <div style={{
                                    width: '100%',
                                    height: '100%',
                                    overflow: 'scroll',
                                    WebkitOverflowScrolling: 'touch',
                                    boxSizing: 'border-box'
                                }}>
                                    <MapPage
                                    store={mapPage}
                                    position={position}
                                    address={address}
                                    />
                                </div>
                            </div>
                        </RouteLayout>
                    )}/>
            </div>
        );
    }

    getFields1 = () => {
        const {assetInfoStore} = this.props;
        const {assetEditForm} = assetInfoStore;
        const { conditioninfo, isInit } = assetEditForm;
        // console.log('conditioninfo: ', toJS(conditioninfo));
        const fields = [];
        if (isInit) {
          conditioninfo.forEach((group) => {
            group.items.forEach((field) => {
                if (field.domkey[0] != 'address') {
                    fields.push(<Form.Item
                        key={field.domkey.join('__')}
                        form={assetEditForm}
                        fieldConfig={field}
                        onChange={assetEditForm.onChange}
                      />);
                }
            });
          });
        }
        return fields;
    }

    getFields = () => {
        const {assetInfoStore} = this.props;
        const {assetInfoForm,address} = assetInfoStore;
        const { conditioninfo, isInit } = assetInfoForm;
        // console.log('conditioninfo: ', toJS(conditioninfo));
        const fields = [];
        if (isInit) {
          conditioninfo.forEach((group) => {
            group.items.forEach((field) => {
                if (field.domkey[0] == 'address') {
                    fields.push(
                        <div className='asset-infocard-address'>
                            <Form.Item
                                key={field.domkey.join('__')}
                                form={assetInfoForm}
                                fieldConfig={field}
                                onChange={assetInfoForm.onChange}
                                extra={address&&address!=''&&<div style={{ marginTop: '18px', marginRight: '5px' }} onClick={(e) => this.openMap(e)}><Icon type='location' /></div>}
                            />
                        </div>
                    );
                }else{
                    fields.push(<Form.Item
                        key={field.domkey.join('__')}
                        form={assetInfoForm}
                        fieldConfig={field}
                        onChange={assetInfoForm.onChange}
                      />);
                }
            });
          });
        }
        return fields;
    }

    openMap = (e) =>{
        const {assetInfoStore, history} = this.props;
        const { mapLayout } = assetInfoStore;
        history.push(mapLayout.path);
    }

}
